import { WeaTop,WeaAlertPage,WeaUpload,WeaDialog,WeaLocaleProvider } from 'ecCom';
import { observer, inject } from 'mobx-react';
import TaskViewExcel from './excel';
import { Button,Spin } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcExcelPageViewStore')
@observer
export default class EdcExcelPage extends React.Component {
    componentDidMount() {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        store.init({ ...query, from: 'view' });
    }
    getButtons = () => {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        const readonly = !!query.type? query.type === '0' : !!query.dataid;
        store.canSubmit = !readonly;
        const buttons = readonly ? [] : [
            <Button onClick={store.save} type="primary">{getLabel(30986,'保存')}</Button>,
        ];
        //dataTable改造,隐藏导入导出
        //buttons.push(<Button onClick={store.exportExcel} type="primary">{getLabel(502294,'导出')}</Button>)
        //readonly ? "" : buttons.push(<Button onClick={(bool) => store.setVisible(bool)} type="primary">{getLabel('502835','导入数据')}</Button>);
        return buttons;
    }
    render() {
        const { edcExcelPageViewStore: store, location: { query } } = this.props;
        const readonly = !!query.type ? query.type === '0' : !!query.dataid;
        if (store.loadingPage) {
              return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin size="large"/></div>
         }
        if (!store.isRight) {
            return <WeaAlertPage><div>{getLabel('382663','暂无权限')}</div></WeaAlertPage>
        }
        return (
            <div className="edc-excel-page">
                <WeaTop
                    title={store.title}
                    iconBgcolor="#1a57a0"
                    icon={<i className="icon-coms02-Data-center" />}
                    buttons={this.getButtons()}
                >
                    <TaskViewExcel store={store} readonly={readonly}></TaskViewExcel>
                </WeaTop>
                <WeaDialog
                        onCancel={() => store.setVisible(false)}
                        title={store.uploadtitle}
                        visible={store.visible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 520, height: 250}}
                    >
                    <div style ={{paddingLeft:20, padding:"24px"}}>
                    <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>下载模板：
                    <a onClick={store.exportExcel} type="primary">{store.title}</a></div>
                    <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>上传数据文件（Excel）：</div>
                    <WeaUpload
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button type="primary">导入</Button>
                    
                    </WeaUpload>
                    </div>
                    </WeaDialog>
            </div>
        )
    }
}